import React from 'react'
import { Card, Form, Input, Switch, Button, Space, Divider, Alert } from 'antd'

const Settings: React.FC = () => {
  const [form] = Form.useForm()

  const handleSave = async (values: any) => {
    console.log('保存设置:', values)
    // TODO: 实现设置保存逻辑
  }

  return (
    <div>
      <h1>系统设置</h1>
      
      <Card title="Fluvio集群配置" style={{ marginBottom: 24 }}>
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSave}
          initialValues={{
            cluster_endpoint: 'localhost:9003',
            default_partitions: 1,
            default_replication: 1,
            auto_create_topics: true,
          }}
        >
          <Form.Item
            name="cluster_endpoint"
            label="集群端点"
            rules={[{ required: true, message: '请输入集群端点' }]}
          >
            <Input placeholder="例如: localhost:9003" />
          </Form.Item>

          <Form.Item
            name="default_partitions"
            label="默认分区数"
            rules={[{ required: true, message: '请输入默认分区数' }]}
          >
            <Input type="number" min={1} />
          </Form.Item>

          <Form.Item
            name="default_replication"
            label="默认副本因子"
            rules={[{ required: true, message: '请输入默认副本因子' }]}
          >
            <Input type="number" min={1} />
          </Form.Item>

          <Form.Item
            name="auto_create_topics"
            label="自动创建主题"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
        </Form>
      </Card>

      <Card title="AI助手配置" style={{ marginBottom: 24 }}>
        <Alert
          message="AI功能配置"
          description="配置OpenAI API密钥以启用智能配置建议和数据质量分析功能。"
          type="info"
          style={{ marginBottom: 16 }}
        />
        
        <Form layout="vertical">
          <Form.Item
            name="openai_api_key"
            label="OpenAI API密钥"
          >
            <Input.Password placeholder="输入您的OpenAI API密钥" />
          </Form.Item>

          <Form.Item
            name="ai_model"
            label="AI模型"
            initialValue="gpt-3.5-turbo"
          >
            <Input placeholder="例如: gpt-3.5-turbo" />
          </Form.Item>

          <Form.Item
            name="max_tokens"
            label="最大令牌数"
            initialValue={1000}
          >
            <Input type="number" min={100} max={4000} />
          </Form.Item>
        </Form>
      </Card>

      <Card title="数据库配置" style={{ marginBottom: 24 }}>
        <Form layout="vertical">
          <Form.Item
            name="database_url"
            label="数据库连接URL"
            initialValue="postgresql://postgres:password@localhost:5432/fluviox"
          >
            <Input placeholder="数据库连接字符串" />
          </Form.Item>

          <Form.Item
            name="max_connections"
            label="最大连接数"
            initialValue={10}
          >
            <Input type="number" min={1} max={100} />
          </Form.Item>

          <Form.Item
            name="connection_timeout"
            label="连接超时 (秒)"
            initialValue={30}
          >
            <Input type="number" min={5} max={300} />
          </Form.Item>
        </Form>
      </Card>

      <Card title="监控和日志" style={{ marginBottom: 24 }}>
        <Form layout="vertical">
          <Form.Item
            name="log_level"
            label="日志级别"
            initialValue="info"
          >
            <Input placeholder="debug, info, warn, error" />
          </Form.Item>

          <Form.Item
            name="metrics_enabled"
            label="启用指标收集"
            valuePropName="checked"
            initialValue={true}
          >
            <Switch />
          </Form.Item>

          <Form.Item
            name="health_check_interval"
            label="健康检查间隔 (秒)"
            initialValue={30}
          >
            <Input type="number" min={10} max={300} />
          </Form.Item>
        </Form>
      </Card>

      <Divider />

      <Space>
        <Button type="primary" onClick={() => form.submit()}>
          保存设置
        </Button>
        <Button onClick={() => form.resetFields()}>
          重置
        </Button>
        <Button type="dashed">
          测试连接
        </Button>
      </Space>
    </div>
  )
}

export default Settings
